<template>
    <div class="container">
        <div class="item">
            <span>客户姓名：</span>
            <span>{{ detail.customerName || "-" }}</span>
        </div>
        <div class="item">
            <span>客户电话：</span>
            <span>{{ detail.customerPhone || "-" }}</span>
        </div>
        <div class="item">
            <span>收件人姓名：</span>
            <span>{{ detail.consignee || "-" }}</span>
        </div>
        <div class="item">
            <span>收件人电话：</span>
            <span>{{ detail.consigneePhone || "-" }}</span>
        </div>
        <!-- <div class="item">
      <span>客户来源：</span>
      <span>{{ detail.customerSource }}</span>
    </div> -->
        <div class="item">
            <span>产品名称：</span>
            <span>{{ detail.productName || "-" }}</span>
        </div>
        <div class="item">
            <span>理财经理：</span>
            <span>{{ detail.financialManager || "-" }}</span>
        </div>
        <!-- <div class="item">
      <span>身份证号码：</span>
      <span>{{ detail.idcard }}</span>
    </div> -->
        <!-- <div class="item">
      <span>付息账号：</span>
      <span>{{ detail.payInterestAccount }}</span>
    </div> -->
        <div class="item">
            <span>打款金额：</span>
            <span>{{ detail.buyMoney || "-" }}元</span>
        </div>
        <div class="item">
            <span>打款时间：</span>
            <span>{{ detail.payTime || "-" }}</span>
        </div>
        <!-- f<div class="item">
      <span>团队负责人：</span>
      <span>{{ detail.teamOwner }}</span>
    </div> -->
        <div class="item">
            <span>年化收益率(%)：</span>
            <span>{{ detail.yearIncomeRate || "-" }}</span>
        </div>
        <div class="item">
            <span>间隔周期：</span>
            <span>{{ detail.interval || "-" }}</span>
            <span style="color: #1989fa; font-size: 13px; margin-left: 5px" @click="goDetail(detail.id)"> 查看详情 </span>
        </div>
        <div class="item">
            <span>序号：</span>
            <span>{{ detail.sn || "-" }}</span>
        </div>
        <div class="item">
            <span>起息时间：</span>
            <span>{{ detail.valueTime || "-" }}</span>
        </div>
        <div class="item">
            <span>附件：</span>
            <div v-if="detail.attachment">
                <img :src="detail.attachment" alt="" @click="previewImage" />
            </div>
            <span v-else>无</span>
        </div>
        <div class="delivery-info" v-if="detail.deliveryType">
            <div class="item">
                <span>配送方式：</span>
                <span v-if="detail.deliveryType == 1">邮寄</span>
                <span v-else>理财经理</span>
            </div>
            <div class="item">
                <span>收件人姓名：</span>
                <span>{{ detail.consignee }}</span>
            </div>
            <div class="item">
                <span>收件人电话：</span>
                <span>{{ detail.consigneePhone }}</span>
            </div>
            <div class="item" v-if="detail.deliveryType == 1">
                <span>收件人地址：</span>
                <span>{{ detail.province + detail.city + detail.district + detail.address }}</span>
            </div>
        </div>
        <!-- <div class="item last">
      <span>订单类型：</span>
      <span>{{ OrderType[detail.status] }}</span>
    </div> -->
        <div class="fixed" v-if="!$_.isEmpty(detail) && !detail.deliveryType">
            <van-button
                type="primary"
                @click="
                    () => {
                        this.showPop = true;
                    }
                "
                >领取确认单</van-button
            >
        </div>
        <van-popup v-model="showPop" position="bottom" :style="{ height: '500px' }">
            <van-form @submit="onSubmit">
                <div class="title">请确认收件人信息</div>
                <van-field name="consignee" v-model="detailTemp.consignee" label="收件人姓名" :rules="[{ required: true, message: '请输入收件人姓名' }]" placeholder="收件人姓名" />
                <van-field
                    v-model="detailTemp.consigneePhone"
                    :rules="[{ validator: phoneValidator, message: '手机号码格式不正确' }]"
                    name="consigneePhone"
                    type="tel"
                    label="收件人电话"
                    placeholder="收件人电话"
                />
                <van-field v-model="detailTemp.consigneeRemark" name="consigneeRemark" label="备注" placeholder="备注" />
                <!-- <div class="title">请确认配送方式</div> -->
                <van-field name="deliveryType" label="配送方式">
                    <template #input>
                        <van-radio-group v-model="deliveryType" direction="horizontal">
                            <van-radio name="1">邮寄</van-radio>
                            <van-radio name="2">理财经理</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-if="deliveryType == 1" v-model="address" readonly clickable name="area" label="地区选择" placeholder="点击选择省市区" @click="showArea = true" />
                <van-field v-if="deliveryType == 1" v-model="detailTemp.address" :rules="[{ required: true, message: '请输入详细地址' }]" name="address" label="详细地址" placeholder="详细地址" />
                <div class="btn">
                    <van-button type="primary" native-type="submit">确认</van-button>
                </div>
            </van-form>
        </van-popup>
        <van-popup v-model="showArea" position="bottom">
            <van-area :area-list="areaList" @confirm="areaConfirm" @cancel="showArea = false" />
        </van-popup>
    </div>
</template>
ss
<script>
    import { getDetail, edit } from "@/api/order";
    import { pagination, OrderType } from "@/utils/enumConfig";
    import { phoneValidator } from "@/utils/validator";
    import { Popup, Toast, ImagePreview } from "vant";
    import areaList from "@/assets/js/area";
    export default {
        data() {
            return {
                phoneValidator,
                OrderType,
                showPop: false,
                showArea: false,
                areaList,
                deliveryType: "1",
                detail: {},
                detailTemp: {},
                province: "",
                city: "",
                district: "",
                address: "",
            };
        },
        async created() {
            let { id } = this.$route.params;
            let detail = await getDetail({ id });
            if (detail) {
                this.detail = detail;
                this.detailTemp = this.$_.cloneDeep(detail);
            }
        },
        methods: {
            async onSubmit(values) {
                if ((!this.province || !this.city || !this.district) && this.deliveryType == 1) {
                    Toast("请选择配送地区！");
                    return;
                }
                let params = {
                    ...this.detail,
                    ...values,
                };
                if (params["deliveryType"] == 1) {
                    params = {
                        ...params,
                        province: this.province,
                        city: this.city,
                        district: this.district,
                    };
                }
                let res = await edit(params);
                if (res.code === 1) {
                    Toast("领取确认单成功！");
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 2000);
                }
            },
            areaConfirm(areaArr) {
                this.province = areaArr[0].name;
                this.city = areaArr[1].name;
                this.district = areaArr[2].name;
                this.showArea = false;
                this.address = areaArr[0].name + areaArr[1].name + areaArr[2].name;
            },
            goDetail(id) {
                this.$router.push(`/order/payList/${id}`);
            },
            previewImage() {
                ImagePreview([this.detail.attachment]);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        background: #fff;
        padding: 20px 0 100px;
        box-sizing: content-box;
        .item {
            margin-bottom: 20px;
            padding-left: 20px;
            img {
                width: 30%;
                height: 30%;
                object-fit: cover;
                margin-top: 10px;
            }
        }

        .fixed {
            position: fixed;
            bottom: 0;
            width: 100%;
            button {
                width: 100%;
            }
        }
        .title {
            font-size: 13px;
            color: #888;
            margin: 20px;
        }
        .btn {
            width: 90%;
            margin: 20px auto 0;
            button {
                width: 100%;
            }
        }
        .delivery-info {
            margin: 0 10px;
            padding: 20px 0;
            border-radius: 10px;
            background-color: #eee;
        }
    }
</style>